
// 公共方法库：闭包或者单例设计模式 这里用的是单例
/**
 错误优先（浏览器能力检测，css样式兼容，obj私有属性循环）
 单例
 三木运算符 正则 console.log(null instanceof Object) //false es6展开运算符剩余参数。
 最精彩：统一函数接口。
 */

let utils = (function () {

   
    // 获取css样式  
    let getCSS = function (element, attr) {
        // 错误优先 ie
        if (!window['getComputedStyle']) return //一条语句{}省略
        let val = window.getComputedStyle(element, null)[attr]
        // 是数字+单位的才转并且去单位转整数。不然保留原来输出
        let reg = /^-?\d+(\.\d+)?(px|rem|em|pt)?$/i
        val = reg.test(val) ? parseFloat(val) : val
        return val
    }
    // 设置单一样式 通过行内样式要带单位 这里兼容filter不透明图
    let setCSS = function (element, attr, value) {
        if (attr === 'filter') {
            element.style.opacity = value
            element.style.filter = `alpha(opacity=${value * 100})`
            return
        }
        let reg = /^(width|height|fontSize|((margin|padding)?(top|left|right|bottom)?))$/i;
        value = reg.test(attr) ? parseFloat(value) + 'px' : value
        element['style'][attr] = value

    }
    // 设置多个样式 for-in给对象加属性 这里只加私有属性
    let setGroupCss = function (element, obj = {}) {
        for (let attr in obj) {
            // 错误优先
            if (!obj.hasOwnProperty(attr)) break
            setCSS(element, attr, obj[attr])

        }
    }
    // 统一css接口 里面容纳三个方法
    let css = function (...arg) {
        let length = arg.length
        let fn = getCSS //选择参数一样多的任意一个函数
        fn = length >= 3 ? setCSS : fn
        fn = length == 2 && (arg[1] instanceof Object) ? setGroupCss : fn
        return fn(...arg) //fn.apply(null,arg) 把数组当做参数一个个传

    }


    // 操作浏览器盒子模型滚动条属性
    

    // 向外暴露需要访问的变量方法 这里是css.
    return {
        css,// css:css es6简写,
        $
    }

})()
